---
image: /generated/articles-docs-html5-audio.png
title: <Html5Audio>
id: html5-audio
crumb: 'API - remotion'
---

[_previously called `<Audio>`_](/docs/mediabunny/new-video)

Using this component, you can add audio to your video. All audio formats which are supported by Chrome are supported by the component.

## API

### `src`

[Put an audio file into the `public/` folder](/docs/assets) and use [`staticFile()`](/docs/staticfile) to reference it.

```tsx twoslash
import {AbsoluteFill, Html5Audio, staticFile} from 'remotion';

export const MyVideo = () => {
  return (
    <AbsoluteFill>
      <Html5Audio src={staticFile('audio.mp3')} />
    </AbsoluteFill>
  );
};
```

### `volume?`

Allows you to control the volume of the audio in it's entirety or frame by frame. Read the page on [using audio](/docs/using-audio) to learn more.

```tsx twoslash title="Setting a static volume"
import {AbsoluteFill, Html5Audio, staticFile} from 'remotion';

export const MyVideo = () => {
  return (
    <AbsoluteFill>
      <Html5Audio volume={0.5} src={staticFile('background.mp3')} />
    </AbsoluteFill>
  );
};
```

```tsx twoslash title="Changing the volume over time"
import {AbsoluteFill, Html5Audio, interpolate, staticFile} from 'remotion';

export const MyVideo = () => {
  return (
    <AbsoluteFill>
      <Html5Audio volume={(f) => interpolate(f, [0, 30], [0, 1], {extrapolateLeft: 'clamp'})} src={staticFile('voice.mp3')} />
    </AbsoluteFill>
  );
};
```

By default, volumes between 0 and 1 are supported, where in iOS Safari, the volume is always 1.  
See [Volume Limitations](/docs/audio/volume#limitations) for more information.

### `loopVolumeCurveBehavior?`<AvailableFrom v="4.0.142" />

Controls the `frame` which is returned when using the [`volume`](#volume) callback function and adding the [`loop`](#loop) attribute.

Can be either `"repeat"` (default, start from 0 on each iteration) or `"extend"` (keep increasing frames).

### `trimBefore?` / `trimAfter?`<AvailableFrom v="4.0.319"/>

`<Html5Audio>` has two helper props you can use to trim audio:

- `trimBefore` will remove a portion of the audio at the beginning (left side)
- `trimAfter` will remove a portion of the audio at the end (right side)

In the following example, we assume that the [`fps`](/docs/composition#fps) of the composition is `30`.

By passing `trimBefore={60}`, the playback starts immediately, but with the first 2 seconds of the audio trimmed away.  
By passing `trimAfter={120}`, any audio after the 4 second mark in the file will be trimmed away.

The audio will play the range from `00:02:00` to `00:04:00`, meaning the audio will play for 2 seconds.

```tsx twoslash
import {AbsoluteFill, Html5Audio, staticFile} from 'remotion';

export const MyVideo = () => {
  return (
    <AbsoluteFill>
      <Html5Audio src={staticFile('audio.mp3')} trimBefore={60} trimAfter={120} />
    </AbsoluteFill>
  );
};
```

### ~~`startFrom?` / `endAt?`~~

:::note Deprecated
These props have been renamed to [`trimBefore`](#trimbefore--trimafter) and [`trimAfter`](#trimbefore--trimafter) in 4.0.319. They will continue to work but you cannot use them together with the new props.
:::

### `playbackRate?`<AvailableFrom v="2.2.0"/>

You can use the `playbackRate` prop to control the speed of the audio. `1` is the default and means regular speed, `0.5` slows down the audio so it's twice as long and `2` speeds up the audio so it's twice as fast.

While Remotion doesn't limit the range of possible playback speeds, in development mode the [`HTMLMediaElement.playbackRate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playbackRate) API is used which throws errors on extreme values. At the time of writing, Google Chrome throws an exception if the playback rate is below `0.0625` or above `16`.

```tsx twoslash
import {AbsoluteFill, Html5Audio, staticFile} from 'remotion';

export const MyVideo = () => {
  return (
    <AbsoluteFill>
      <Html5Audio src={staticFile('audio.mp3')} playbackRate={2} />
    </AbsoluteFill>
  );
};
```

:::note
Playing a video in reverse is not supported.
:::

### `muted?`<AvailableFrom v="2.0.0"/>

The `muted` prop will be respected. It will lead to no audio being played while still keeping the audio tag mounted. It's value may change over time, for example to only mute a certain section of the audio.

```tsx twoslash
import {AbsoluteFill, Html5Audio, staticFile, useCurrentFrame} from 'remotion';

export const MyVideo = () => {
  const frame = useCurrentFrame();
  return (
    <AbsoluteFill>
      <Html5Audio src={staticFile('audio.mp3')} muted={frame < 30} />
    </AbsoluteFill>
  );
};
```

### `name?`<AvailableFrom v="4.0.71"/>

_optional_

A name and that will be shown as the label of the sequence in the timeline of the Remotion Studio. This property is purely for helping you keep track of items in the timeline.

### `loop?`<AvailableFrom v="3.2.29"/>

You can use the `loop` prop to loop audio.

```tsx twoslash
import {AbsoluteFill, Html5Audio, staticFile, useCurrentFrame} from 'remotion';

export const MyVideo = () => {
  const frame = useCurrentFrame();
  return (
    <AbsoluteFill>
      <Html5Audio loop src={staticFile('audio.mp3')} />
    </AbsoluteFill>
  );
};
```

### `toneFrequency?`<AvailableFrom v="4.0.47"/>

Adjust the pitch of the audio - will only be applied during rendering.

Accepts a number between `0.01` and `2`, where `1` represents the original pitch. Values less than `1` will decrease the pitch, while values greater than `1` will increase it.

A `toneFrequency` of 0.5 would lower the pitch by half, and a `toneFrequency` of `1.5` would increase the pitch by 50%.

### `audioStreamIndex?`<AvailableFrom v="4.0.340" />

Select the audio stream to use. The default is `0`.

```tsx twoslash
import {AbsoluteFill, Html5Audio} from 'remotion';

// ---cut---
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Html5Audio audioStreamIndex={1} src={'https://remotion.media/multiple-audio-streams.mov'} />
    </AbsoluteFill>
  );
};
```

:::note
This prop only works during rendering.  
Browsers do not support selecting the audio track without enabling experimental flags.

Not to be confused with audio channels. A video can have multiple audio streams, each stream can have multiple channels.  
Multiple audio streams can be used for example for adding multiple languages to a video.

Audio streams are zero-indexed.
:::

### `acceptableTimeShiftInSeconds?`<AvailableFrom v="3.2.42"/>

In the [Remotion Studio](/docs/terminology/studio) or in the [Remotion Player](/docs/player), Remotion will seek the audio if it gets too much out of sync with Remotion's internal time - be it due to the audio loading or the page being too slow to keep up in real-time. By default, a seek is triggered if `0.45` seconds of time shift is encountered. Using this prop, you can customize the threshold.

### `pauseWhenBuffering?`<AvailableFrom v="4.0.111"/>

If set to `true` and the audio is buffering, the Player will enter into the [native buffering state](/docs/player/buffer-state). The default is `false`, but will become `true` in Remotion 5.0.

### `showInTimeline?`<AvailableFrom v="4.0.122"/>

If set to `false`, no layer will be shown in the timeline of the Remotion Studio. The default is `true`.

### `delayRenderTimeoutInMilliseconds?`<AvailableFrom v="4.0.140" />

Customize the [timeout](/docs/delay-render#modifying-the-timeout) of the [`delayRender()`](/docs/delay-render) call that this component makes.

### `delayRenderRetries?`<AvailableFrom v="4.0.140" />

Customize the [number of retries](/docs/delay-render#retrying) of the [`delayRender()`](/docs/delay-render) call that this component makes.

### `useWebAudioApi?`<AvailableFrom v="4.0.306" />

Enable the [Web Audio API](/docs/audio/volume#limitations) for the audio tag.

### `onError?`<AvailableFrom v="4.0.326" />

Handle an error playing the audio.

### ~`allowAmplificationDuringRender?`<AvailableFrom v="3.3.17" />~

Deprecated since v4.0.279: This prop intended to opt into setting the volume to a value higher than one, even though it would only apply during render.

The option does not make sense anymore, because it is now possible to set the volume higher than `1`.  
To prevent synthetic amplification, set a volume not higher than 1.

## See also

- [Source code for this component](https://github.com/remotion-dev/remotion/blob/main/packages/core/src/audio/Audio.tsx)
- [Using audio](/docs/using-audio)
- [Audio visualization](/docs/audio/visualization)
- [`<Html5Video />`](/docs/html5-video)
- [`<Audio />` (from `@remotion/media`)](/docs/media/audio)

<Credits
  contributors={[
    {
      username: 'JonnyBurger',
      contribution: 'Implementation',
    },
    {
      username: 'evoxf1',
      contribution: (
        <>
          <code>toneFrequency</code> prop
        </>
      ),
    },
  ]}
/>
